<template>
    <div>
        <div class="content">
            <zrzVideo v-if="$route.params.id !='1'" :data="videoData[$route.params.id-2]">
                <h2 class="homeTitle">免费直播</h2>
            </zrzVideo>
            <div v-for="(item, i) in arrData" :key="i">
                <h2 class="homeTitle">{{item.title}}</h2>
                <div class="container">
                    <com-Part v-for="(tem, idx) in item.children" :key="idx">
                        <template v-slot:p_img>
                            <img :src="tem.img">
                        </template>
                        <template v-slot:p_tit>{{ tem.name }}</template>
                        <template v-slot:p_sche>{{ tem.class }}</template>
                        <template v-slot:p_source>{{ tem.platform }}</template>
                        <template v-slot:p_gold><a href="" class="p_gold"></a></template>
                        <template v-slot:p_pri>{{ tem.price }}</template>
                    </com-Part>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { get, getVideoData } from '@/api'
import zrzVideo from '@/components/ZrzVideo.vue'
import comPart from '@/components/ComPart.vue'


export default {
    props: {
        id: {
            default: 1
        }
    },
    components: {
        zrzVideo, comPart
    },
    data() {
        return {
            thisid: 1,
            selected: [],
            javaDevelopment: [],
            planeDesign: [],
            English: [],
            listData: [],
            arrData: [],
            selTitle: ['It互联网热门课程', '设计创作热门课程', '电商营销热门课程', '地道日语修炼', '近30天最多人在学', '升值加薪必学职场课', 'office从入门到精通', '2周学会唱歌和乐器', '月薪1万都在学的理财课程', '摄影达人俗称指南'],
            javaTitle: ['精选公开课', '精选系统课'],
            planeTitle: ['公开体验课', '精选付费课'],
            EngTitle: ['免费体验课1', '精选系统课'],
            videoData:[]
        }
    },
    methods: {
        cut(a, numb,titleName) {
            var arr = []
            var num = 0;
            // console.log(titleName)
            console.log(a)
            for (let i = 0; i < numb.length - 1; i++) {
                var ls=[];
                num = num + numb[i];
                 arr.push({title:titleName[i],children:a.slice(num, num + numb[i + 1])})
            }
            this.arrData = arr;
            console.log( this.arrData)
        }
    },
    created() {

        get().then(res => {
            this.selected = res.data.data.slice(0, 58)
            this.javaDevelopment = res.data.data.slice(58, 76)
            this.planeDesign = res.data.data.slice(76, 100)
            this.English = res.data.data.slice(100, 139)
            if (this.$route.params.id === "1") {
                this.cut(this.selected, [0, 10, 10, 9, 5, 5, 4, 3, 4, 4, 4],this.selTitle)
            } else if (this.$route.params.id === "2") {
                this.cut(this.javaDevelopment, [0, 10, 9],this.javaTitle)
            } else if (this.$route.params.id === "3") {
                this.cut(this.planeDesign, [0, 8, 7],this.planeTitle)
            } else {
                this.cut(this.English, [0, 7, 10],this.EngTitle)
            }
        })
        getVideoData().then(res=>{
            this.videoData=res.data
        })
    },
    beforeRouteUpdate(to, from, next) {
        get().then(res => {
            this.selected = res.data.data.slice(0, 58)
            this.javaDevelopment = res.data.data.slice(58, 76)
            this.planeDesign = res.data.data.slice(76, 100)
            this.English = res.data.data.slice(100, 139)

            if (this.$route.params.id === '1') {
                this.cut(this.selected, [0, 10, 10, 9, 5, 5, 4, 3, 4, 4, 4],this.selTitle)
            } else if (this.$route.params.id === '2') {
                this.cut(this.javaDevelopment, [0, 10, 9],this.javaTitle)
            } else if (this.$route.params.id === '3') {
                this.cut(this.planeDesign, [0, 8, 7],this.planeTitle)
            } else {
                this.cut(this.English, [0, 7, 10],this.EngTitle)
            }
        })
        next()
    }
}
</script>
<style lang="less" scoped>
.homeTitle {
    // background-color:red;
    text-align: center;
    font-size: 30px;
    color: #333;
    padding: 10px 0;
    font-weight: 400;
}

.container {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
}
</style>
